<template>
  <div class="beam-layout-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <SelectBlock
            :allowClear="true"
            v-model="conditions.orgCode"
            @change="blockChange($event)"
          ></SelectBlock>
          <a-select
            allowClear
            v-model="conditions.unitWorks"
            placeholder="请选择单位工程"
            :loading="unitWorksLoading"
            @change="search()"
          >
            <a-select-option
              :value="item"
              v-for="(item, index) in unitWorksSource"
              :key="index"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="search()"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="beam-table-container">
      <div class="table-header" header="质量问题处理"></div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
          @toggle-row-expand="toggleExpandChangeEvent"
        >
          <vxe-column type="expand" width="40">
            <template #content="{ row }">
              <div class="subTable-container">
                <vxe-table
                  ref="xTable"
                  min-height="120px"
                  max-height="528px"
                  class="scrollbarStyle"
                  align="center"
                  show-overflow
                  show-header-overflow
                  :data="row.subData"
                  :column-config="{ resizable: true }"
                >
                  <vxe-column field="unitWorks" title="单位工程"> </vxe-column>
                  <vxe-column field="divisionalWorks" title="分部工程">
                  </vxe-column>
                  <vxe-column field="subDivisionalWorks" title="子分部工程">
                  </vxe-column>
                  <vxe-column field="itemWorks" title="分项工程"> </vxe-column>
                  <vxe-column field="subItemWorks" title="子分项工程">
                  </vxe-column>
                  <vxe-column field="procedureItem" title="工序"> </vxe-column>
                </vxe-table>
              </div>
            </template>
          </vxe-column>
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column
            show-overflow
            :key="index"
            :title="item.title"
            :field="item.key"
            :width="item.width"
            v-for="(item, index) in columns"
          >
            <template #default="{ row }">
              <div
                v-if="item.key == 'wfnodename'"
                :class="[checkStatusClass(row.wfnodename), 'state']"
              >
                {{ row.wfnodename }}
              </div>
              <div v-else>{{ row[item.key] }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="operate"
            width="180"
            title="操作"
            fixed="right"
            align="center"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button
                  type="link"
                  @click="gotoDatails(row)"
                  v-if="row.detail"
                >
                  查看
                </a-button>
                <a-button type="link" @click="gotoEdit(row)" v-if="row.approve">
                  处理
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
      <div class="pager-container">
        <vxe-pager
          background
          :current-page.sync="pager.page"
          :page-size.sync="pager.pageSize"
          :total="pager.total"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes', 'FullJump']"
          @page-change="paginationChange"
        >
          <template #left>
            <div class="vxe-pager-left-tip-container">
              第<span>1</span>到<span
                >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
              >共<span>{{ pager.total }}</span
              >条记录
            </div>
          </template>
        </vxe-pager>
      </div>
    </div>
  </div>
</template>

<script>
import SelectBlock from "@/components/wisdom-beam/SelectBlock";
import { notificationTip } from "@/utils";
import {
  getUnitWorksSelect,
  bYJLDelete,
  bYJLSubmit,
  getGXRejectList,
  getBYJLChildList,
} from "@/api/wisdom-beam/quality-app";
export default {
  components: {
    SelectBlock,
  },
  data() {
    return {
      conditions: {
        //标段
        orgCode: undefined,
        //单位工程
        unitWorks: undefined,
      },
      //单位工程
      unitWorksSource: [],
      unitWorksLoading: false,
      columns: [
        {
          title: "报验人",
          key: "sysUsername",
        },
        {
          title: "报验时间",
          key: "createTime",
        },
        {
          title: "报验个数（个）",
          key: "byCount",
        },
        {
          title: "最新处理时间",
          key: "updateTime",
        },
        {
          title: "当前步骤",
          key: "wfnodename",
        },
      ],
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  methods: {
    //展开行
    toggleExpandChangeEvent(event) {
      let { expanded, row, $rowIndex } = event;
      if (expanded) {
        return new Promise((resolve, reject) => {
          getBYJLChildList({ id: row.id })
            .then((res) => {
              let { data } = res;
              this.$set(
                this.tableData[$rowIndex],
                "subData",
                data?.result || []
              );
              resolve();
            })
            .catch((_) => {
              reject();
            });
        });
      }
    },

    //详情
    gotoDatails(row) {
      let { orgCode, field1, childIds } = row;
      let ids = [];
      childIds.forEach((item) => {
        ids.push({ id: item });
      });
      sessionStorage.setItem("record_ids", JSON.stringify(ids));
      this.$router.push({
        path: "/nebula/wisdom-beam-app/approvalRecord/details",
        query: {
          orgCode,
          unitWorks: field1,
          backPath: "/nebula/wisdom-beam-app/problem",
          id: row.id,
          showFlow: true,
        },
      });
    },

    //编辑
    gotoEdit(row) {
      let { field1, orgCode, orgName, childIds, id } = row;
      let ids = [];
      childIds.forEach((item) => {
        ids.push({ id: item });
      });
      localStorage.setItem("processesApproveIds", (childIds || []).toString());
      this.$router.push({
        path: "/nebula/wisdom-beam-app/approvalRecord/approve",
        query: {
          orgCode,
          orgName,
          unitWorks: field1,
          title: "处理",
          backPath: "/nebula/wisdom-beam-app/problem",
          inspectionStatus: 1,
          id,
        },
      });
    },

    //查询页面所有数据
    getData() {
      Promise.all([this.getUnitWorksList(), this.getTableData()])
        .then((res) => {})
        .catch((_) => {})
        .finally((_) => {});
    },

    //监听标段切换
    blockChange() {
      this.getData();
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    //查询单位工程【下拉框】
    getUnitWorksList() {
      this.unitWorksLoading = true;
      let { orgCode } = this.conditions;
      return new Promise((resolve, reject) => {
        getUnitWorksSelect({ orgCode: orgCode?.key || "" })
          .then((res) => {
            let { data } = res;
            this.unitWorksSource = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.unitWorksSource = [];
            reject();
          })
          .finally((_) => {
            this.unitWorksLoading = false;
          });
      });
    },

    //查询-表格
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { orgCode, unitWorks = "" } = this.conditions;
      getGXRejectList({
        page,
        pageSize,
        orgCode: orgCode?.key,
        unitWorks,
      })
        .then((res) => {
          this.tableData = res?.data?.result?.rows || [];
          this.pager.total = res?.data?.result?.total || 0;
        })
        .catch((_) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    //检验状态类名
    checkStatusClass(status) {
      switch (status) {
        case "待提交":
          return "default";

        case "已完成":
          return "normal";

        default:
          return "warning";
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-header {
  padding: 28px 20px !important;
}
.state {
  &.normal {
    color: #42c596;
  }
  &.warning {
    color: #ff993f;
  }
  &.default {
    color: #0098ff;
  }
}
</style>
